var b = new String('abcdef'); // 這裡 String 為建構函式
console.log(b);
console.dir(String); // 也有 prototype 此屬性
String.prototype.lastText = function(){
return this[this.length - 1];
}
console.log(b.lastText()); // f
Number.prototype.secondpower = function(){
return this * this;
}
var num = 5;
console.log(num.secondpower()); // 25
日期
var date = new Date();
console.log(date);
console.dir(Date);
Date.prototype.getFullDate = function(){
var day = this.getDate();
var month = this.getMonth()+1;
var year = this.getFullYear();
var today = year + '/' + month + '/' + day;
return today;
}
console.log(date.getFullDate());
使用 Object.create 建立多層繼承
我們要如何在原型鍊上新增一個層級呢??
我們上一篇有提到
function Dog(nickname , color , size){
this.nickname = nickname;
this.color = color;
this.size = size;
}
var black = new Dog('小黑','黑色','大');
console.log(black);
// Object -> Dog -> black(實體)
// Object -> Animal -> Dog -> black(實體)
// Object -> Animal -> Cat -> black(實體)
這裡我們先來介紹 Object.create
Object.create 可以把 物件 作為原型使用
var black = {
nickname: '小黑',
color: '黑色',
size: '大',
bark: function(){
console.log(this.nickname + '吠叫');
}
}
var white = Object.create(black);
console.log(white); // {}
console.log(white.nickname); // 小黑
white.nickname = '小白';
console.log(white.nickname); // 小白
// 所以在不改變屬性的情況下
// white 的值都可以 以 black 作為預設值
這裡在舉一個完整例子
function Animal(family){
this.kingdom = '動物界';
this.family = family || '人科';
}
Animal.prototype.move = function(){
console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
this.nickname = nickname;
this.color = color || '白色';
this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.bark = function(){
console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();
不過會發現我們的科別與動物界都沒有顯示(undefined)
是因為 Dog 只有繼承 Animal 的原型
並沒有繼承 Animal 的建構函式
所以改成這樣
function Animal(family){
this.kingdom = '動物界';
this.family = family || '人科';
}
Animal.prototype.move = function(){
console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
Animal.call(this,'犬科');
this.nickname = nickname;
this.color = color || '白色';
this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.bark = function(){
console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();
不過這裡還有一個小問題
black 目前的 constructor 為 Animal
這裡簡單說明一下 constructor
constructor: 使用建構函式產生一個物件,則物件內的constructor會指向原本的建構函式
所以 black 的 constructor 應該為 Dog
那為什麼它原本的 constructor 是 Animal呢??
因為
Dog.prototype = Object.create(Animal.prototype);
這行覆蓋掉它了
所以必須把它補回來
function Animal(family){
this.kingdom = '動物界';
this.family = family || '人科';
}
Animal.prototype.move = function(){
console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
Animal.call(this,'犬科');
this.nickname = nickname;
this.color = color || '白色';
this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();
console.log(black.constructor); // Dog 的建構函式
這裡我們在加上貓的物種
function Animal(family){
this.kingdom = '動物界';
this.family = family || '人科';
}
Animal.prototype.move = function(){
console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
Animal.call(this,'犬科');
this.nickname = nickname;
this.color = color || '白色';
this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();
function Cat(nickname,color,size){
Animal.call(this,'貓科');
this.nickname = nickname;
this.color = color;
this.size = size;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function(){
console.log(this.nickname + '喵喵叫');
}
var kitty = new Cat('凱蒂','白色','大');
kitty.meow();
kitty.move();
那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷